<template>
    <el-image
            class="img"
            :src="imgSrc"
            fit="fit"></el-image>
</template>

<script>
export default {
  name: 'AjaxImg',
  data() {
    return {
      defaultImg: '../../assets/imgerror.png',
      imgSrc: '',
      url: this.url,
    }
  },
  props: ['url'],
  methods: {
    renderImgs(item) {
      if (item.indexOf('base64') !== -1) {
        return [item];
      } else {
        return item.split(',');
      }
    },
    loadData() {
      this.$axiosInstance({
        url: this.url,
        method: 'get',
        responseType: 'blob',
        params: {}
      }).then(response => {
        let reader = new FileReader();
        reader.onload = (e) => {
          this.imgSrc = e.target.result
        };
        reader.readAsDataURL(response.data)
      });
    },
    error(event) {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null;
    }
  },
  computed: {
    LoginInfo() {
      return this.$store ? this.$store.getters.getLoginInfo : {}
    }
  },
  mounted() {
    this.loadData();
  },
}
</script>

<style scoped>

</style>
